<html>

<head>
    <style>
        html,
        body {
            padding: 0px;
            margin: 0px;
            font-size: small;
            width: 100%;
            height: 100vh;
        }

        div {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .titleOuter {
            background-color: burlywood;
            justify-content: flex-end;
            padding: 10px;
            height: 20px;
            width: calc(100% - 20px);
        }

        .titleOuter div {
            margin-left: 5px;
        }

        .redTitle {
            background-color: brown !important;
        }

        .contOuter {
            width: 100%;
            flex-wrap: wrap;
            justify-content: flex-start;
            overflow-y: auto;
            max-height: calc(100vh - 40px);
            flex: auto;
        }

        .itemOuter {
            margin: 2px;
            width: calc(33.33333% - 4px);
            height: 110px;
            flex-direction: column;
            opacity: .5;
            cursor: pointer;
            position: relative;
        }

        .itemOuter img {
            width: 100%;
            object-fit: cover;
        }

        .itemOuter div {
            /* width: 100%; */
            background-color: rgba(0, 0, 0, 0.2);
            position: absolute;
            bottom: 0px;
            left: 0px;
            right: 0px;
            padding: 3px;
            max-height: 110px;
            overflow: hidden;
            text-align: center;
        }

        .itemOuter:hover {
            opacity: 1;
        }

        .colored-overlay {
            position: relative;
            opacity: .8;
        }

        .colored-overlay::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 0, 0, 0.3);
            /* 半透明蓝色 */
            z-index: 9999;
            /* 将蒙版放置在底部 */
        }

        .rootMask {
            flex-direction: column;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.6);
            z-index: 9999;
        }
    </style>
</head>

<body>
    <div id="root_mask_html_dialog" class="rootMask">正在处理... </div>
    <div id="titleOuter" class="titleOuter">
        <div id="addBtn"><button onclick="addBtnClick()">添加</button></div>
        <div id="delBtn"><button onclick="delBtnClick()">删除</button></div>
        <div id="refBtn"><button onclick="refBtnCLick()">刷新</button></div>
        <div id="escBtn"><button onclick="editBtnClick()">完成编辑</button></div>
        <div id="editBtn"><button onclick="editBtnClick()">编辑</button></div>
    </div>
    <div class="contOuter">
    </div>
</body>

<script>
    var skp_files;
    var isEditing = false;

    // 设置顶部按钮状态
    function Editing(v) {
        if (v) {
            document.getElementById('editBtn').style.display = 'none'
            document.getElementById('addBtn').style.display = 'flex'
            document.getElementById('delBtn').style.display = 'flex'
            document.getElementById('escBtn').style.display = 'flex'
        }
        else {
            document.getElementById('editBtn').style.display = 'flex'
            document.getElementById('addBtn').style.display = 'none'
            document.getElementById('delBtn').style.display = 'none'
            document.getElementById('escBtn').style.display = 'none'
        }
        isEditing = v;
        return v;
    }
    // 设置按钮初始状态
    Editing(false)
    showMask(true)


    // 编辑按钮或者取消编辑按钮按下
    function editBtnClick() {
        if (!isEditing) {
            document.getElementById("titleOuter").classList.add('redTitle');
        }
        else {
            selected = document.querySelectorAll('.colored-overlay')
            for (let index = 0; index < selected.length; index++) {
                selected[index].classList.remove('colored-overlay');
            }
            document.getElementById("titleOuter").classList.remove('redTitle');
        }

        Editing(!isEditing)
    }

    // 添加按钮按下
    function addBtnClick(){
        sketchup.IwantAddLight();
    }


    // //阻止右键点击事件的默认行为
    // document.addEventListener("contextmenu", function (event) {
    //     event.preventDefault();
    // });

    //通知ruby准备好了
    window.addEventListener('load', function (event) {
        sketchup.IwantGetLightList(true) // 这里是可以从缓存中获取,如果不想要缓存中的，要带参数true
    });

    //接收skp文件列表
    function receiveDataFromRuby(objList, light_path) {
        console.log(objList, light_path)
        skp_files = JSON.parse(objList)
        // 动态生成元素并绑定点击事件
        document.getElementsByClassName('contOuter')[0].innerHTML = ''
        skp_files.forEach(item => {
            const div = document.createElement('div');
            div.classList.add('itemOuter');
            div.id = item.filename;
            image_url =  encodeURIComponent(`${item.lightname}.jpg`)
            div.innerHTML = `<img src= "${light_path}\\${image_url}" onerror="this.src='../assets/icon/no_image.png'; this.onerror=null;"/><div>${item.lightname}</div>`;
            div.addEventListener('click', itemClick);
            document.getElementsByClassName('contOuter')[0].appendChild(div);
        });
        showMask(false)
    }

    // 点击了图片
    function itemClick(event) {
        const clickedItemId = event.currentTarget.id;
        if (isEditing) {
            // 当前编辑状态
            document.getElementById(clickedItemId).classList.toggle('colored-overlay')
        }
        else {
            putLight(clickedItemId)
        }
    }

    // 发送命令给ruby 放置灯具
    function putLight(filename) {
        sketchup.IwantPutLight(filename)
    }

    // 点击了删除按钮
    function delBtnClick() {
        selected = document.querySelectorAll('.colored-overlay');
        if (selected.length > 0) {
            showMask(true)
            let fileArray = [];
            for (let index = 0; index < selected.length; index++) {
                fileArray.push(selected[index].id)
                // selected[index].classList.remove('colored-overlay');
            }
            console.log(fileArray)
            sketchup.IwantDelLight(fileArray)
        }
    }

    // 
    function refBtnCLick(){
        sketchup.IwantGetLightList(false)
    }

    function showMask(v){
        if(v){
            document.getElementById('root_mask_html_dialog').style.display = 'flex'
        }
        else{
            document.getElementById('root_mask_html_dialog').style.display = 'none'
        }
    }



</script>

</html>
